<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>许愿详情 - 心愿社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #8b5cf6; /* 主色调：紫色，代表梦想和希望 */
            --primary-light: #c4b5fd;
            --primary-dark: #6d28d9;
            --secondary: #ec4899; /* 辅助色：粉色，代表浪漫 */
            --accent: #f59e0b; /* 强调色：橙色，代表活力 */
            --success: #10b981; /* 成功色：绿色 */
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-light: #9ca3af;
            --bg-light: #f9fafb;
            --bg-white: #ffffff;
            --border-light: #e5e7eb;
            --radius: 12px;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 55px;
            padding-bottom: 75px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 55px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
            box-shadow: var(--shadow);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        .nav-action {
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 1.2rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .nav-action:hover {
            background-color: var(--bg-light);
        }
        
        /* 许愿详情卡片 */
        .wish-detail {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            margin: 15px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        .wish-header {
            padding: 15px 15px 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .wish-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .wish-user {
            flex: 1;
        }
        
        .user-name {
            font-size: 1rem;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .wish-time {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .wish-content {
            padding: 0 15px 15px;
        }
        
        .wish-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--primary-dark);
            line-height: 1.4;
        }
        
        .wish-description {
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 15px;
            color: var(--text-primary);
        }
        
        /* 图片容器样式 */
        .wish-media {
            margin-bottom: 15px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .single-media img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        
        .multi-media {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
        }
        
        .media-item {
            aspect-ratio: 1/1;
            overflow: hidden;
        }
        
        .media-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 许愿标签和状态 */
        .wish-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .wish-tag {
            background-color: rgba(139, 92, 246, 0.1);
            color: var(--primary);
            font-size: 0.8rem;
            padding: 3px 10px;
            border-radius: 12px;
        }
        
        .wish-status {
            font-size: 0.8rem;
            padding: 3px 10px;
            border-radius: 12px;
            font-weight: 500;
        }
        
        .status-pending {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--accent);
        }
        
        .status-fulfilled {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        /* 互动区域 */
        .wish-actions {
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px 0;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.9rem;
            gap: 5px;
            flex: 1;
        }
        
        .action-btn i {
            font-size: 1.1rem;
        }
        
        .action-btn:hover, .action-btn.active {
            color: var(--primary);
        }
        
        /* 评论区 */
        .comments-section {
            padding: 0 15px;
            margin-bottom: 20px;
        }
        
        .comments-title {
            font-size: 1rem;
            font-weight: 600;
            margin: 15px 0;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .comments-list {
            margin-bottom: 20px;
        }
        
        .comment-item {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-content {
            flex: 1;
            background-color: var(--bg-light);
            padding: 10px 12px;
            border-radius: 16px;
            position: relative;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .comment-author {
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .comment-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .comment-text {
            font-size: 0.9rem;
            line-height: 1.4;
            margin-bottom: 5px;
        }
        
        .comment-actions {
            display: flex;
            gap: 15px;
            font-size: 0.8rem;
        }
        
        .comment-action {
            color: var(--text-secondary);
            background: none;
            border: none;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        /* 回复样式 */
        .replies {
            margin-top: 10px;
            margin-left: 25px;
            border-left: 2px solid var(--border-light);
            padding-left: 10px;
        }
        
        .reply-item {
            margin-bottom: 10px;
            padding: 8px 10px;
            background-color: rgba(139, 92, 246, 0.05);
            border-radius: 12px;
        }
        
        .reply-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 3px;
        }
        
        .reply-author {
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .reply-time {
            font-size: 0.7rem;
            color: var(--text-secondary);
        }
        
        .reply-text {
            font-size: 0.85rem;
            line-height: 1.4;
            margin-bottom: 3px;
        }
        
        /* 评论输入框 */
        .comment-input-container {
            position: fixed;
            bottom: 65px;
            left: 0;
            right: 0;
            padding: 10px 15px;
            background-color: var(--bg-white);
            border-top: 1px solid var(--border-light);
            z-index: 900;
        }
        
        .comment-form {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .comment-input {
            flex: 1;
            padding: 10px 15px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 0.9rem;
            resize: none;
            height: 40px;
        }
        
        .comment-input:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
        }
        
        .send-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .send-btn:disabled {
            background-color: var(--primary-light);
            cursor: not-allowed;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.3rem;
            margin-bottom: 3px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 提示消息 */
        .toast-notification {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            z-index: 9999;
            font-size: 0.9rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast-notification.show {
            opacity: 1;
        }
        
        /* 加载更多评论 */
        .load-more-comments {
            width: 100%;
            padding: 8px;
            margin: 10px 0;
            background-color: transparent;
            border: 1px solid var(--border-light);
            border-radius: 20px;
            color: var(--text-secondary);
            font-size: 0.85rem;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-action" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">心愿详情</div>
        <button class="nav-action" id="moreBtn">
            <i class="fas fa-ellipsis-h"></i>
        </button>
    </div>
    
    <!-- 许愿详情卡片 -->
    <div class="wish-detail">
        <div class="wish-header">
            <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="wish-avatar">
            <div class="wish-user">
                <div class="user-name">旅行爱好者</div>
                <div class="wish-time">2小时前 · 来自手机客户端</div>
            </div>
        </div>
        
        <div class="wish-content">
            <h3 class="wish-title">今年夏天想去冰岛看极光，有没有同行的朋友？</h3>
            <p class="wish-description">
                一直梦想着能亲眼看到北极光，计划今年夏天和朋友一起去冰岛旅行，希望能实现这个愿望！正在努力攒钱中，预计7月份出发，行程大概10天左右。
                <br><br>
                有没有去过的朋友可以给些建议？比如最佳观测地点、必带物品、交通方式等等。如果有同样计划的朋友，也可以一起交流一下呀！
            </p>
            
            <div class="wish-media multi-media">
                <div class="media-item">
                    <img src="https://picsum.photos/id/10/300/300" alt="冰岛风景1">
                </div>
                <div class="media-item">
                    <img src="https://picsum.photos/id/15/300/300" alt="冰岛风景2">
                </div>
                <div class="media-item">
                    <img src="https://picsum.photos/id/28/300/300" alt="冰岛风景3">
                </div>
            </div>
            
            <div class="wish-meta">
                <span class="wish-tag">旅行</span>
                <span class="wish-tag">冰岛</span>
                <span class="wish-tag">极光</span>
                <span class="wish-status status-pending">待实现</span>
            </div>
        </div>
        
        <div class="wish-actions">
            <button class="action-btn like-btn">
                <i class="far fa-heart"></i>
                <span>42 点赞</span>
            </button>
            <button class="action-btn comment-btn">
                <i class="far fa-comment"></i>
                <span>18 评论</span>
            </button>
            <button class="action-btn share-btn">
                <i class="far fa-share-alt"></i>
                <span>分享</span>
            </button>
            <button class="action-btn save-btn">
                <i class="far fa-bookmark"></i>
                <span>收藏</span>
            </button>
        </div>
    </div>
    
    <!-- 评论区 -->
    <div class="comments-section">
        <div class="comments-title">
            <i class="far fa-comments"></i>
            <span>全部评论 (18)</span>
        </div>
        
        <div class="comments-list">
            <!-- 评论1 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/26/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">冰岛旅行过</div>
                        <div class="comment-time">1小时前</div>
                    </div>
                    <div class="comment-text">
                        我去年去过冰岛看极光，最好的观测点是 Thingvellir 国家公园，一定要带防风防寒的衣服，那里的风特别大！另外可以提前下载极光预测APP，祝你好运能看到！
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 12
                        </button>
                        <button class="comment-action reply-btn">回复</button>
                    </div>
                    
                    <!-- 回复 -->
                    <div class="replies">
                        <div class="reply-item">
                            <div class="reply-header">
                                <div class="reply-author">旅行爱好者 <span style="color:var(--text-secondary);font-weight:normal;">回复</span> 冰岛旅行过</div>
                                <div class="reply-time">40分钟前</div>
                            </div>
                            <div class="reply-text">
                                谢谢建议！请问你是跟团还是自由行呀？交通方便吗？
                            </div>
                            <div class="comment-actions">
                                <button class="comment-action like-comment">
                                    <i class="far fa-heart"></i> 3
                                </button>
                                <button class="comment-action reply-btn">回复</button>
                            </div>
                        </div>
                        
                        <div class="reply-item">
                            <div class="reply-header">
                                <div class="reply-author">冰岛旅行过 <span style="color:var(--text-secondary);font-weight:normal;">回复</span> 旅行爱好者</div>
                                <div class="reply-time">20分钟前</div>
                            </div>
                            <div class="reply-text">
                                我是自由行，租了四驱车，冰岛的路况比较复杂，建议选四驱车更安全。
                            </div>
                            <div class="comment-actions">
                                <button class="comment-action like-comment">
                                    <i class="far fa-heart"></i> 5
                                </button>
                                <button class="comment-action reply-btn">回复</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论2 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/91/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">七月去北欧</div>
                        <div class="comment-time">1.5小时前</div>
                    </div>
                    <div class="comment-text">
                        我也计划7月份去冰岛！不过我是7月中旬，说不定可以偶遇啊！我建了一个冰岛旅行群，要不要加进来一起交流？
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 8
                        </button>
                        <button class="comment-action reply-btn">回复</button>
                    </div>
                </div>
            </div>
            
            <!-- 评论3 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/65/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">摄影爱好者</div>
                        <div class="comment-time">2小时前</div>
                    </div>
                    <div class="comment-text">
                        拍极光一定要带三脚架和大光圈镜头！ISO建议800-1600，曝光时间20-30秒左右，能拍出很美的效果。你准备带什么相机去？
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 15
                        </button>
                        <button class="comment-action reply-btn">回复</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多评论 -->
        <button class="load-more-comments" id="loadMoreComments">
            加载更多评论
        </button>
    </div>
    
    <!-- 评论输入框 -->
    <div class="comment-input-container">
        <form class="comment-form" id="commentForm">
            <textarea class="comment-input" placeholder="写下你的评论..." id="commentText"></textarea>
            <button type="submit" class="send-btn" id="sendComment" disabled>
                <i class="fas fa-paper-plane"></i>
            </button>
        </form>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-star"></i>
            <span>许愿墙</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="far fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 提示消息
        function showToast(message) {
            // 检查是否已有toast
            let toast = document.querySelector('.toast-notification');
            if (toast) {
                toast.remove();
            }
            
            // 创建新toast
            toast = document.createElement('div');
            toast.className = 'toast-notification';
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            // 显示toast
            setTimeout(() => {
                toast.classList.add('show');
            }, 10);
            
            // 3秒后隐藏并移除
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }
        
        // 返回按钮
        document.getElementById('backBtn').addEventListener('click', () => {
            showToast('返回许愿列表');
        });
        
        // 更多操作按钮
        document.getElementById('moreBtn').addEventListener('click', () => {
            // 创建操作菜单
            const actionMenu = document.createElement('div');
            actionMenu.className = 'position-fixed top-15 right-3 bg-white shadow-lg rounded-2 p-2 z-50';
            actionMenu.style.width = '200px';
            actionMenu.innerHTML = `
                <div class="list-group">
                    <button class="list-group-item list-group-item-action py-2">
                        <i class="fas fa-flag text-secondary me-2"></i> 举报
                    </button>
                    <button class="list-group-item list-group-item-action py-2">
                        <i class="fas fa-share-alt text-secondary me-2"></i> 分享到朋友圈
                    </button>
                    <button class="list-group-item list-group-item-action py-2">
                        <i class="fas fa-link text-secondary me-2"></i> 复制链接
                    </button>
                </div>
            `;
            
            document.body.appendChild(actionMenu);
            
            // 点击菜单项
            actionMenu.querySelectorAll('.list-group-item').forEach(item => {
                item.addEventListener('click', function() {
                    const actionText = this.textContent.trim().split(' ')[1];
                    showToast(`${actionText}成功`);
                    document.body.removeChild(actionMenu);
                });
            });
            
            // 点击其他区域关闭菜单
            document.addEventListener('click', function closeMenu(e) {
                if (!actionMenu.contains(e.target) && e.target !== document.getElementById('moreBtn')) {
                    document.body.removeChild(actionMenu);
                    document.removeEventListener('click', closeMenu);
                }
            });
        });
        
        // 点赞功能
        document.querySelector('.like-btn').addEventListener('click', function() {
            const icon = this.querySelector('i');
            const text = this.querySelector('span');
            let count = parseInt(text.textContent);
            
            if (icon.classList.contains('far')) {
                // 点赞
                icon.classList.remove('far');
                icon.classList.add('fas');
                this.classList.add('active');
                text.textContent = `${count + 1} 点赞`;
                showToast('点赞成功');
            } else {
                // 取消点赞
                icon.classList.remove('fas');
                icon.classList.add('far');
                this.classList.remove('active');
                text.textContent = `${count - 1} 点赞`;
                showToast('已取消点赞');
            }
        });
        
        // 收藏功能
        document.querySelector('.save-btn').addEventListener('click', function() {
            const icon = this.querySelector('i');
            
            if (icon.classList.contains('far')) {
                // 收藏
                icon.classList.remove('far');
                icon.classList.add('fas');
                this.classList.add('active');
                showToast('已收藏');
            } else {
                // 取消收藏
                icon.classList.remove('fas');
                icon.classList.add('far');
                this.classList.remove('active');
                showToast('已取消收藏');
            }
        });
        
        // 分享功能
        document.querySelector('.share-btn').addEventListener('click', function() {
            showToast('分享功能已触发');
        });
        
        // 评论功能激活
        document.querySelector('.comment-btn').addEventListener('click', function() {
            document.getElementById('commentText').focus();
        });
        
        // 评论输入框交互
        const commentInput = document.getElementById('commentText');
        const sendBtn = document.getElementById('sendComment');
        
        commentInput.addEventListener('input', function() {
            // 启用/禁用发送按钮
            sendBtn.disabled = this.value.trim() === '';
            
            // 自动调整高度
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight > 100 ? 100 : this.scrollHeight) + 'px';
        });
        
        // 提交评论
        document.getElementById('commentForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const commentText = commentInput.value.trim();
            
            if (commentText) {
                showToast('评论成功');
                
                // 清空输入框并重置高度
                commentInput.value = '';
                commentInput.style.height = '40px';
                sendBtn.disabled = true;
                
                // 添加新评论到列表顶部
                const commentsList = document.querySelector('.comments-list');
                const newComment = document.createElement('div');
                newComment.className = 'comment-item';
                newComment.innerHTML = `
                    <img src="https://picsum.photos/id/128/100/100" alt="你的头像" class="comment-avatar">
                    <div class="comment-content">
                        <div class="comment-header">
                            <div class="comment-author">我</div>
                            <div class="comment-time">刚刚</div>
                        </div>
                        <div class="comment-text">
                            ${commentText}
                        </div>
                        <div class="comment-actions">
                            <button class="comment-action like-comment">
                                <i class="far fa-heart"></i> 0
                            </button>
                            <button class="comment-action reply-btn">回复</button>
                        </div>
                    </div>
                `;
                
                // 添加到列表顶部
                commentsList.insertBefore(newComment, commentsList.firstChild);
                
                // 更新评论计数
                const commentsCountElem = document.querySelector('.comments-title span');
                const currentCount = parseInt(commentsCountElem.textContent.match(/\d+/)[0]);
                commentsCountElem.textContent = `全部评论 (${currentCount + 1})`;
                
                // 绑定新评论的事件
                bindCommentEvents(newComment);
            }
        });
        
        // 评论点赞和回复功能
        function bindCommentEvents(commentElement) {
            // 评论点赞
            const likeBtn = commentElement.querySelector('.like-comment');
            if (likeBtn) {
                likeBtn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countText = this.childNodes[2].textContent.trim();
                    let count = parseInt(countText);
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.style.color = 'var(--primary)';
                        this.childNodes[2].textContent = ` ${count + 1}`;
                        showToast('点赞成功');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.style.color = '';
                        this.childNodes[2].textContent = ` ${count - 1}`;
                        showToast('已取消点赞');
                    }
                });
            }
            
            // 回复按钮
            const replyBtn = commentElement.querySelector('.reply-btn');
            if (replyBtn) {
                replyBtn.addEventListener('click', function() {
                    const author = this.closest('.comment-content, .reply-item').querySelector('.comment-author, .reply-author').textContent.split(' ')[0];
                    commentInput.value = `回复 @${author}：`;
                    commentInput.focus();
                    commentInput.style.height = 'auto';
                    commentInput.style.height = (commentInput.scrollHeight > 100 ? 100 : commentInput.scrollHeight) + 'px';
                    sendBtn.disabled = false;
                });
            }
        }
        
        // 加载更多评论
        document.getElementById('loadMoreComments').addEventListener('click', function() {
            const btn = this;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            btn.disabled = true;
            
            // 模拟加载延迟
            setTimeout(() => {
                btn.innerHTML = '加载更多评论';
                btn.disabled = false;
                
                // 添加模拟评论
                const commentsList = document.querySelector('.comments-list');
                
                // 模拟评论
                const mockComments = [
                    {
                        avatar: 'https://picsum.photos/id/22/100/100',
                        author: '极光追逐者',
                        time: '3小时前',
                        text: '7月份是冰岛的夏季，白天很长，极光出现的概率会比冬季小一些，但天气更温暖，各有优劣吧。',
                        likes: 6
                    },
                    {
                        avatar: 'https://picsum.photos/id/45/100/100',
                        author: '背包客小明',
                        time: '4小时前',
                        text: '如果要去冰河湖，建议早点出发，那里的停车场经常满位。还有一定要尝尝当地的羊肉汤，很美味！',
                        likes: 9
                    }
                ];
                
                // 添加到评论列表
                mockComments.forEach(comment => {
                    const newComment = document.createElement('div');
                    newComment.className = 'comment-item';
                    newComment.innerHTML = `
                        <img src="${comment.avatar}" alt="评论者头像" class="comment-avatar">
                        <div class="comment-content">
                            <div class="comment-header">
                                <div class="comment-author">${comment.author}</div>
                                <div class="comment-time">${comment.time}</div>
                            </div>
                            <div class="comment-text">
                                ${comment.text}
                            </div>
                            <div class="comment-actions">
                                <button class="comment-action like-comment">
                                    <i class="far fa-heart"></i> ${comment.likes}
                                </button>
                                <button class="comment-action reply-btn">回复</button>
                            </div>
                        </div>
                    `;
                    
                    commentsList.appendChild(newComment);
                    bindCommentEvents(newComment);
                });
                
                showToast('已加载更多评论');
            }, 1500);
        });
        
        // 图片点击预览
        document.querySelectorAll('.media-item img').forEach(img => {
            img.addEventListener('click', function() {
                showToast('图片预览功能');
            });
        });
        
        // 初始化绑定已有评论事件
        document.querySelectorAll('.comment-item').forEach(comment => {
            bindCommentEvents(comment);
        });
    </script>
</body>
</html>

